<template>
  <div>
    <div
      v-show="show_calendar"
      style="
        position: fixed;
        left: 20px;
        width: 370px;
        z-index: 1;
        height: 100vh;
        margin: 20px 10px;
      "
    >
      <Button long type="default" @click="close_calendar">关闭日历</Button>
      <Calendar cell-height='50'/>
    </div>
    <!-- 动态展示列表 -->
    <Scroll
     
      :height="screenHeight"
      :on-reach-bottom="handleReachBottom"
      :style="{ paddingLeft: scroll_paddingLeft, textAlign: 'centent',width:auto }"
      :distance-to-edge="distance"
    >
      <Card
        v-for="(item, index) in showlist"
        :key="index"
        :style="'margin: 10px ' + card_margin_LR"
      >
        <div ref="my_tag_card">
          <Avatar
            icon="ios-person"
            :src="head_photo"
            size="40"
            style="display: inline-block; margin: 5px"
          />
          <div style="display: inline-block">
            <Input
              :style="{ width: textarea_width - 30 + 'px' }"
              v-model="item.text"
              :border="false"
              readonly
              type="textarea"
              :autosize="true"
              placeholder=""
            />
          </div>
          <!-- <pre>
            {{item.text}}
          </pre> -->
        </div>
        <Space wrap>
          <template v-for="(base64, index) in item.img" :key="index">
            <Image
              :src="base64"
              fit="contain"
              width="120px"
              height="80px"
              preview
              :preview-list="item.img"
              :initial-index="index"
            />
          </template>
        </Space>
        <br />
        <div>
          <Icon type="ios-time-outline" />发布时间:
          {{ item.time }}
          &emsp; &emsp;
          <Icon type="ios-star-outline" />
          &emsp;
          <Icon type="ios-thumbs-up-outline" />
          &emsp;
          <Icon type="ios-chatbubbles-outline" />
        </div>
      </Card>
    </Scroll>
    <!-- <button @click="test">test</button> -->
  </div>
</template>

<script>
import {
  PATH_Dynamic_list,
  aliyun_oss_path,
  break_width,
  PATH_homepage_headphoto
} from '@/mylibs/define'
import get_oss_data from '@/api/aliyun_oss'
import eventBus from '@/eventBus/eventBus'
export default {
  name: 'Mydynamic',
  data() {
    return {
      head_photo: null,
      showlist: [],
      dynamicList: [],
      screenWidth: null,
      screenHeight: null,
      index_page: 0,
      page_show_num: 5,
      scroll_class: '',
      distance: [-1, -1],
      scroll_paddingLeft: '430px',
      show_calendar: true,
      card_margin_LR: '50px',
      textarea_width: '350'
    }
  },

  watch: {
    screenWidth: {
      handler(val, oldVal) {
        if (this.$refs.my_tag_card) {
          try {
            this.textarea_width = this.$refs.my_tag_card[0].offsetWidth
          } catch (e) {}
        }

        if (val < break_width) {
          this.scroll_class = ''
          this.show_calendar = false
          this.scroll_paddingLeft = '5px'
          this.card_margin_LR = '5px'
        } else {
          this.scroll_class = 'padding'
          this.show_calendar = true
          this.scroll_paddingLeft = '430px'
          this.card_margin_LR = '50px'
        }
      }
    }
  },

  methods: {
    close_calendar() {
      this.show_calendar = false
      this.scroll_paddingLeft = '10px'
    },

    // 上拉加载更多
    handleReachBottom() {
      return new Promise((resolve) => {
        this.getDynamicData()
        resolve()
      })
    },

    // 获取动态列表
    async getDynamicList(fun_back) {
      var { res, ok, err } = await get_oss_data(
        aliyun_oss_path + PATH_Dynamic_list
      )
      if (ok) {
        if (Array.isArray(res)) {
          this.dynamicList = res
          if (fun_back) {
            fun_back()
          }
        } else {
          this.$Notice.error({ desc: '数据非数组' })
        }
      } else {
        this.$Notice.error({ desc: '获取数据失败:' + err })
      }
    },

    //动态数据
    async getDynamicData() {
      var start = this.index_page * this.page_show_num
      var end = start + this.page_show_num

      if (start >= this.dynamicList.length) {
        this.$Notice.info({ desc: '没有更多数据了哟~' })
        return
      }

      if (end < this.dynamicList.length) {
        var list = this.dynamicList.slice(start, end)

        for (let index = 0; index < list.length; index++) {
          const element = list[index]

          var { res, ok, err } = await get_oss_data(aliyun_oss_path + element)
          if (ok) {
            this.showlist.push(res)
          } else {
            this.$Notice.error({ desc: '获取动态数据失败:' + err })
          }
        }
      } else {
        for (let index = start; index < this.dynamicList.length; index++) {
          const element = this.dynamicList[index]

          var { res, ok, err } = await get_oss_data(aliyun_oss_path + element)
          if (ok) {
            this.showlist.push(res)
          } else {
            this.$Notice.error({ desc: '获取动态数据失败:' + err })
          }
        }
      }
      console.log(this.showlist)
      this.index_page++
    },

    get_headphoto() {
      get_oss_data(aliyun_oss_path + PATH_homepage_headphoto).then(
        ({ res, ok, err }) => {
          if (ok) {
            if (res.img) {
              this.head_photo = res.img
            }
          }
        }
      )
    }
  },

  created() {
    console.log('组件创造')
    this.get_headphoto()
    this.getDynamicList(this.getDynamicData)
    eventBus.on('ev_screen_width_height', ({ w, h }) => {
      this.screenWidth = w
      this.screenHeight = h
    })
  },

  activated() {
    console.log('组件激活')
    eventBus.on('ev_screen_width_height', ({ w, h }) => {
      this.screenWidth = w
      this.screenHeight = h
    })
  }
}
</script>

<style>
.padding {
  padding-left: 300px;
  padding-right: 300px;
}
</style>
